<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div class="bar bar-header">
			<div class="h1 title">单选按钮列表</div>
		</div>

		<div class="content has-header">

			<div class="list">

				<label class="item item-radio">
          <input type="radio" name="group" value="go" checked="checked">
          <div class="item-content">
            Go
          </div>
          <i class="radio-icon ion-checkmark"></i>
        </label>

				<label class="item item-radio">
          <input type="radio" name="group" value="python">
          <div class="item-content">
            Python
          </div>
          <i class="radio-icon ion-checkmark"></i>
        </label>

				<label class="item item-radio">
          <input type="radio" name="group" value="ruby">
          <div class="item-content">
            Ruby
          </div>
          <i class="radio-icon ion-checkmark"></i>
        </label>

				<label class="item item-radio">
          <input type="radio" name="group" value=".net">
          <div class="item-content">
            .Net
          </div>
          <i class="radio-icon ion-checkmark"></i>
        </label>

				<label class="item item-radio">
          <input type="radio" name="group" value="java">
          <div class="item-content">
            Java
          </div>
          <i class="radio-icon ion-checkmark"></i>
        </label>

				<label class="item item-radio">
          <input type="radio" name="group" value="php">
          <div class="item-content">
            PHP
          </div>
          <i class="radio-icon ion-checkmark"></i>
        </label>

			</div>

		</div>
		<div class="list">
			<label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
			<label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
			<label class="item item-input">
    <textarea placeholder="Comments"></textarea>
  </label>
		</div>
		<div class="list">
			<label class="item item-input">
    <span class="input-label">用户名：</span>
    <input type="text">
  </label>
			<label class="item item-input">
    <span class="input-label">密码：</span>
    <input type="password">
  </label>
		</div>
		<div class="list">
			<label class="item item-input item-stacked-label">
    <span class="input-label">First Name</span>
    <input type="text" placeholder="John">
  </label>
			<label class="item item-input item-stacked-label">
    <span class="input-label">Last Name</span>
    <input type="text" placeholder="Suhr">
  </label>
			<label class="item item-input item-stacked-label">
    <span class="input-label">Email</span>
    <input type="text" placeholder="john@suhr.com">
  </label>
		</div>
		<div class="list">
			<label class="item item-input item-floating-label">
    <span class="input-label">First Name</span>
    <input type="text" placeholder="First Name">
  </label>
			<label class="item item-input item-floating-label">
    <span class="input-label">Last Name</span>
    <input type="text" placeholder="Last Name">
  </label>
			<label class="item item-input item-floating-label">
    <span class="input-label">Email</span>
    <input type="text" placeholder="Email">
  </label>
		</div>
		<div class="list list-inset">
			<label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
			<label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
		</div>
		<div class="list">

  <div class="item item-input-inset">
    <label class="item-input-wrapper">
      <input type="text" placeholder="Email">
    </label>
    <button class="button button-small">
      Submit
    </button>
  </div>

</div>
<div class="list list-inset">
  <label class="item item-input">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="text" placeholder="Search">
  </label>
</div>
<div class="bar bar-header item-input-inset">
  <label class="item-input-wrapper">
    <i class="icon ion-ios-search placeholder-icon"></i>
    <input type="search" placeholder="搜索">
  </label>
  <button class="button button-clear">
    取消
  </button>
</div>
<label class="toggle">
   <input type="checkbox">
   <div class="track">
     <div class="handle"></div>
   </div>
</label>
<ul class="list">

  <li class="item item-toggle">
     HTML5
     <label class="toggle toggle-assertive">
       <input type="checkbox">
       <div class="track">
         <div class="handle"></div>
       </div>
     </label>
  </li>

  <li class="item item-toggle">
  	css
  	<label class="toggle toggle-assertive">
  		<input type="checkbox" />
  		<div class="track">
  			<div class="handle"></div>
  		</div>
  	</label>
  </li>
 <li class="item item-toggle">
 	javascript
 	<input type="checkbox" />
 	<div class="track">
 		<div class="handle"></div>
 	</div>
 </li>
 <li class="item item-toggle">
 	bootstarp
 	<input type="checkbox" />
 	<div class="track">
 		<div class="handle"></div>
 	</div>
 </li>
</ul>
<div class="bar bar-header bar-light">
	<h1 class="title">bar-light</h1>
	
</div>
<button class="button">
  Default
</button>

<button class="button button-light">
  button-light
</button>

<button class="button button-stable">
  button-stable
</button>

<button class="button button-positive">
  button-positive
</button>

<button class="button button-calm">
  button-calm
</button>

<button class="button button-balanced">
  button-balanced
</button>

<button class="button button-energized">
  button-energized
</button>

<button class="button button-assertive">
  button-assertive
</button>

<button class="button button-royal">
  button-royal
</button>

<button class="button button-dark">
  button-dark
</button>
<button class="button">
  <i class="icon ion-loading-c"></i> Loading...
</button>

<button class="button icon-left ion-home">Home</button>

<button class="button icon-left ion-star button-positive">Favorites</button>

<a class="button icon-right ion-chevron-right button-calm">Learn More</a>

<a class="button icon-left ion-chevron-left button-clear button-dark">Back</a>

<button class="button icon ion-gear-a">dfdfdds</button>

<a class="button button-icon icon ion-settings"></a>

<a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a>
	<ul class="list">
		<li class="item">
			css
		</li>
		<li class="item">
			 javascript
		</li>
		<li class="item">
			bootstrap
		</li>
		<li class="item">
			php
		</li>
	</ul>
	<div class="card">
  <div class="item item-divider">
    卡片头部！
  </div>
  <div class="item item-text-wrap">
    基本卡片，包含了文本信息。
  </div>
  <div class="item item-divider">
    卡片底部！
  </div>
</div>
<div class="list">
  <label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input">
    <textarea placeholder="Comments"></textarea>
  </label>
</div
<div class="range">
  <i class="icon ion-volume-low"></i>
  <input type="range" name="volume">
  <i class="icon ion-volume-high"></i>
</div>

<div class="list" style="margin-top: 13px">
  <div class="item item-divider">
    Ranges In A List
  </div>
  <div class="item range range-positive">
    <i class="icon ion-ios-sunny-outline"></i>
    <input type="range" name="volume" min="0" max="100" value="12">
    <i class="icon ion-ios-sunny"></i>
  </div>
  <div class="item range range-calm">
    <i class="icon ion-ios-lightbulb-outline"></i>
    <input type="range" name="volume" min="0" max="100" value="25">
    <i class="icon ion-ios-lightbulb"></i>
  </div>
  <div class="item range range-balanced">
    <i class="icon ion-ios-bolt-outline"></i>
    <input type="range" name="volume" min="0" max="100" value="38">
    <i class="icon ion-ios-bolt"></i>
  </div>
  <div class="item range range-energized">
    <i class="icon ion-ios-moon-outline"></i>
    <input type="range" name="volume" min="0" max="100" value="50">
    <i class="icon ion-ios-moon"></i>
  </div>
  <div class="item range range-assertive">
    <i class="icon ion-ios-partlysunny-outline"></i>
    <input type="range" name="volume" min="0" max="100" value="63">
    <i class="icon ion-ios-partlysunny"></i>
  </div>
  <div class="item range range-royal">
    <i class="icon ion-ios-rainy-outline"></i>
    <input type="range" name="volume" min="0" max="100" value="75">
    <i class="icon ion-ios-rainy"></i>
  </div>
  <div class="item range range-dark">
    <i class="icon ion-ios-lightbulb-outline"></i>
    <input type="range" name="volume" min="0" max="100" value="88">
    <i class="icon ion-ios-lightbulb"></i>
  </div>
</div>
<div class="list">

  <div class="item item-input item-select">
    <div class="input-label">
      Lightsaber
    </div>
    <select>
      <option>Blue</option>
      <option selected="">Green</option>
      <option>Red</option>
    </select>
  </div>

  <div class="item item-input item-select">
    <div class="input-label">
      Fighter
    </div>
    <select>
      <option>ARC-170</option>
      <option>A-wing</option>
      <option>Delta-7</option>
      <option>Naboo N-1</option>
      <option>TIE</option>
      <option selected="">X-wing</option>
      <option>Y-wing</option>
    </select>
  </div>

  <div class="item item-input item-select">
    <div class="input-label">
      Droid
    </div>
    <select>
      <option>2-1B</option>
      <option>B1</option>
      <option>C-3PO</option>
      <option>IG-88</option>
      <option>IT-O</option>
      <option selected="">R2-D2</option>
    </select>
  </div>

  <div class="item item-input item-select">
    <div class="input-label">
      Planet
    </div>
    <select>
      <option>Alderaan</option>
      <option selected="">Dagobah</option>
      <option>Felucia</option>
      <option>Geonosis </option>
      <option>Hoth</option>
      <option>Kamino</option>
      <option>Mygeeto</option>
      <option>Naboo</option>
      <option>Tataouine</option>
      <option>Utapau</option>
      <option>Yavin</option>
    </select>
  </div>

</div>
<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>
<ul class="list color-list-demo">
	<li class="item dark">
	  light
	  <span class="color-demo light-bg light-border"></span>
	</li>
	<li class="item stable-dark">
	  stable
	  <span class="color-demo stable-bg stable-border"></span>
	</li>
	<li class="item positive">
	  positive
	  <span class="color-demo positive-bg positive-border"></span>
	</li>
	<li class="item calm">
	  calm
	  <span class="color-demo calm-bg calm-border"></span>
	</li>
	<li class="item balanced">
	  balanced
	  <span class="color-demo balanced-bg balanced-border"></span>
	</li>
	<li class="item energized">
	  energized
	  <span class="color-demo energized-bg energized-border"></span>
	</li>
	<li class="item assertive">
	  assertive
	  <span class="color-demo assertive-bg assertive-border"></span>
	</li>
	<li class="item royal">
	  royal
	  <span class="color-demo royal-bg royal-border"></span>
	</li>
	<li class="item dark">
	  dark
	  <span class="color-demo dark-bg dark-border"></span>
	</li>
</ul>
	</body>

</html>